<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>
            <title><fmt:message key="login.title.tag" /></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <jsp:include page="menu/header.jsp" />
            <%-- remember to name the variables the same as the attributes --%>
            <c:set var="pointer" value="${requestScope.pointer}" />
            <c:set var="dimensionalCuts" value="${requestScope.dimensionalCuts}" />
            <c:set var="rootDimensionalCuts" value="${requestScope.rootDimensionalCuts}" />
            <c:set var="cutMembers" value="${requestScope.cutMembers}"/>
            <c:set var="dataComparators" value="${requestScope.dataComparators}"/>
            <c:set var="comparators" value="${requestScope.comparators}"/>
            <c:set var="dimensionalCutDates" value="${requestScope.dimensionalCutDates}"/>
            <c:set var="dimensionalCutDatesData" value="${requestScope.dimensionalCutDatesData}"/>

            <script type="text/javascript">
                function getGraphics(loading){
                    try{
                        var _loading = document.getElementById(loading);
                        //if(_loading) _loading.style.visibility="visible";
                        this.setTimeout(getGraphicsImp(loading), 1000);
                    }catch(ex){}
                }

                function getGraphicsImp(loading){
                    var path="ajaxDashboardTest.do?scoreCard=${pointer.idScoreCard}";
                    var ajax = new accesoAJAX.CargadorDeDatos("POST",path,
                    function(data){
                        
                        document.getElementById("chartdiv").innerHTML = "";
                        var chart;
                        var legend;

                        var XMLresponse = buildXMLFromString(data);
                        var elems = XMLresponse.getElementsByTagName("register");
                        if(elems){
                            
                            var datos = new Array();
                            
                            for(var i=0;i<elems.length;i++){
                                // alert(elems[i]+","+i);
                                var register = elems[i];
                                var date = register.getAttribute("date");
                                var datas = register.childNodes;
                                var real,goal;

                                for(var i=0;i<elems.length;i++){
                                    // alert(elems[i]+","+i);
                                    var register = elems[i];
                                    var date = register.getAttribute("date");
                                    var datas = register.childNodes;
                                    var real,goal;
                                    for(var j=0;j<datas.length;j++){
                                        if(datas[j].getAttribute){
                                            var type = (datas[j].getAttribute("type"));
                                            if(type == "REAL")real = datas[j].getAttribute("value");
                                            if(type == "GOAL")goal = datas[j].getAttribute("value");
                                        }

                                    }
                                    datos[i] = {period:date,real:real,goal:goal};
                                }


                            }

                            chart = new AmCharts.AmSerialChart();
                            chart.dataProvider = datos;
                            chart.categoryField = "period";
                            chart.startDuration = 1;
                            chart.marginTop = 25;
                            chart.marginLeft = 47;
                            chart.rotate = false;
                            

                            var graph1 = new AmCharts.AmGraph();
                            graph1.title = "Real";
                            graph1.valueField = "real";
                            graph1.type = "column";
                            graph1.lineAlpha = 0;
                            graph1.fillColors = "#28669C";
                            graph1.fillAlphas = 1;
                            chart.addGraph(graph1);

                            var graph2 = new AmCharts.AmGraph();
                            graph2.title = "Meta";
                            graph2.valueField = "goal";
                            graph2.type = "line";
                            graph2.lineThickness = 2;
                            graph2.lineColor = "#D8E017";
                            graph2.bullet = "round";
                            graph2.fillAlphas = 0;
                            chart.addGraph(graph2);

                            var catAxis = chart.categoryAxis;
                            catAxis.gridPosition = "start";
                            catAxis.dashLength = 5;

                            var valAxis = new AmCharts.ValueAxis();
                            valAxis.dashLength = 5;
                            chart.addValueAxis(valAxis);

                            var valAxis2 = new AmCharts.ValueAxis();
                            valAxis2.position = "top";
                            chart.addValueAxis(valAxis2);

                            var legend = new AmCharts.AmLegend();
                            legend.align = "center";
                            chart.addLegend(legend);

                            chart.write("chartdiv");
                        }
                        // document.getElementById(loading).style.visibility="hidden";
                    });
                }

            </script>

        </head>
        <body>

            <%-- this is how you use an object properties with jstl --%>


            <table border="1">
                <tr>
                    <td>
                        <c:out value="${pointer.name}" />
                    </td>
                    <c:forEach var="comparator" items="${comparators}">
                        <td><c:out value="${comparator.description}" /></td>
                    </c:forEach>
                </tr>
                <c:forEach var="dimensionalCut" items="${rootDimensionalCuts}">
                    <c:set var="members" value="${cutMembers[dimensionalCut]}" />
                    <tr>
                        <td colspan="3">
                            <c:forEach var="member" items="${members}">
                                <a href="drillDashboardTest.do?pointer=${pointer.idScoreCard}&dimensionalCut=${dimensionalCut.idDimensionalCut}"><c:out value="${member.name}" /></a>
                            </c:forEach>
                        </td>
                    </tr>
                    <c:set var="datesData" value="${dimensionalCutDatesData[dimensionalCut]}" />
                    <c:set var="dates" value="${dimensionalCutDates[dimensionalCut]}" />
                    <c:forEach var="date" items="${dates}">
                        <tr>
                            <td><c:out value="${date}" /></td>
                            <c:set var="dataValues" value="${datesData[date]}" />
                            <c:forEach var="data" items="${dataValues}">
                                <td><c:out value="${data.register}" /></td>
                            </c:forEach>
                        </tr>

                    </c:forEach>

                </c:forEach>

            </table>


            <div id="chartdiv" style="width: 500px; height: 600px;"></div>
            <div class="loading" id="loading_graph"></div>
            <a onclick="getGraphics('loading_graph');">dame click!</a>

        </body>
    </fmt:bundle>
</html>
